<template>
  <div class="form-container">
    <div class="form-item">
      <div class="item-title">选择区域</div>
      <div class="input-area">
        <el-select
          v-model="code[0]"
          placeholder="选择省"
          @change="(val) => getCityOrZone(val, 0)"
        >
          <el-option
            v-for="(item, index) in allProvince"
            :key="index"
            :value="item.code"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="code[1]"
          placeholder="选择市"
          :disabled="!code[0]"
          @change="(val) => getCityOrZone(val, 1)"
        >
          <el-option
            v-for="(item, index) in allCity"
            :key="index"
            :value="item.code"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="code[2]"
          :disabled="!code[1]"
          placeholder="选择区县"
        >
          <el-option
            v-for="(item, index) in allZone"
            :key="index"
            :value="item.code"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          @click="addArea"
          >确定选择</el-button
        >
      </div>
      <div class="tags">
        <el-tag
          round
          type="info"
          effect="dark"
          :closable="true"
          style="margin-right: 10px"
          @close="(val) => delArea(val, item)"
          v-for="(item, index) in allTags"
          :key="index"
          >{{ item.map((item) => item.name).join("-") }}</el-tag
        >
      </div>
    </div>
    <div class="form-item">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
      >
        <el-form-item label="信息费">
          <div class="fee">
            <el-input v-model="form.informationFee"></el-input
            >{{ "&nbsp&nbsp&nbsp" }}元
          </div>
        </el-form-item>
        <el-form-item label="保险费">
          <div class="fee">
            <el-input v-model="form.insurancePremium"></el-input
            >{{ "&nbsp&nbsp&nbsp" }}元
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="form-item">
      <div class="item-title">平台抽成设置</div>
      <div class="text-area">
        司机获得金额：起步价 *（1 -
        <el-input
          style="width: 80px"
          v-model="form.startingPriceCommission"
        ></el-input>
        %） + （订单金额 - 起步价）*（1-
        <el-input
          style="width: 80px"
          v-model="form.extraCommission"
        ></el-input>
        %） - 信息费 - 保险费
      </div>
    </div>
    <div class="form-item">
      <div class="item-title">快车计价规则设置</div>
    </div>
    <div class="form-item">
      <el-form
        :model="form"
        ref="formRef1"
        label-width="100px"
      >
        <el-form-item label="返空费">
          <div class="text-area">
            超出起步价包含公里数后
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcReturnFeeOneKilometre"
            ></el-input>
            {{ "&nbsp&nbsp&nbsp" }}
            公里以上
            {{ "&nbsp&nbsp&nbsp" }}
            加价
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcReturnFeeOnePrice"
            ></el-input>
            {{ "&nbsp&nbsp" }}
            元/公里
          </div>
        </el-form-item>
        <el-form-item>
          <div class="text-area">
            超出起步价包含公里数后
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcReturnFeeTwoKilometre"
            ></el-input>
            {{ "&nbsp&nbsp&nbsp" }}
            公里以上
            {{ "&nbsp&nbsp&nbsp" }}
            加价
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcReturnFeeTwoPrice"
            ></el-input>
            {{ "&nbsp&nbsp" }}
            元/公里
          </div>
        </el-form-item>
        <el-form-item>
          <div class="text-area">
            举例：比如25KM订单，实际行驶25分钟，收取车费为：起步价7元（含3KM，10分钟）+
            里程费1.2*（25KM-3KM）+
            时长费：0.3*（25分钟-10分钟）+超7-20KM返空费1.3*（20KM-7KM）+超20KM返空费1.5*（25KM-20KM）
          </div>
        </el-form-item>
        <el-form-item label="等待费">
          <div class="text-area">
            司机到达起点{{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcWaitForTime"
            ></el-input
            >{{ "&nbsp&nbsp&nbsp" }} 分钟后计算等待费 {{ "&nbsp"
            }}<el-input
              style="width: 80px"
              v-model="form.kcWaitForPrice"
            ></el-input
            >{{ "&nbsp&nbsp" }} 元/分钟
          </div>
        </el-form-item>
        <el-form-item label="空驶费">
          <div class="text-area">
            司机接单去接单路上行驶
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcTravelKilometre"
            ></el-input>
            {{ "&nbsp" }}
            公里，或者
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcTravelKilometrePrice"
            ></el-input>
            {{ "&nbsp" }}
            分钟以上计算空驶费（乘客取消订单情况下），按行驶里程
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcTravelTime"
            ></el-input>
            {{ "&nbsp" }}
            元/公里，以及按时长
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcTravelTimePrice"
            ></el-input>
            {{ "&nbsp" }}
            元/分钟，总共收取空驶费
          </div>
        </el-form-item>
        <el-form-item label="快车预估价格">
          <div class="text-area">
            起步价 + 超过里程数费用 + 超过分钟数费用 + 返空费费用之和，乘以比例
            {{ "&nbsp" }}
            <el-input
              style="width: 80px"
              v-model="form.kcEstimatedPriceRatio"
            ></el-input>
            {{ "&nbsp" }}
            %
            {{ "&nbsp&nbsp&nbsp" }}
            注意：时长为地图导航所预估的行驶时间
            {{ "&nbsp&nbsp&nbsp" }}
            减免分钟数
            {{ "&nbsp" }}
            <el-input style="width: 80px"></el-input>
             <!-- 加入的 -->
             <!-- <el-input
              style="width: 80px"
              v-model="form.kcTravelTimePrice"
            ></el-input> -->
            {{ "&nbsp" }}
            分钟
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="form-item">
      <div
        class="text-area"
        style="justify-content: space-between; margin-bottom: 10px"
      >
        <el-select
          readonly
          size="small"
          style="width: 100px"
          v-model="timePeriodName"
          clearable
        >
          <el-option value="早高峰">早高峰</el-option>
          <el-option value="晚高峰">晚高峰</el-option>
          <el-option value="夜间">夜间</el-option>
        </el-select>
        <div class="text-area">
          <el-time-picker
            placeholder="开始时间(时分)"
            value-format="HH:mm"
            format="HH:mm"
            size="small"
            style="width: 150px"
            v-model="startTime"
          ></el-time-picker>
          {{ "&nbsp" }}
          -
          {{ "&nbsp" }}
          <el-time-picker
            placeholder="结束时间(时分)"
            value-format="HH:mm"
            format="HH:mm"
            size="small"
            style="width: 150px"
            v-model="endTime"
          ></el-time-picker>
        </div>
        <div class="text-area">
          起步价
          <el-input
            style="width: 80px"
            v-model="startingPrice"
            size="small"
          ></el-input
          >元
        </div>

        <div class="text-area">
          含时长
          <el-input
            style="width: 80px"
            v-model="startingIncludesDuration"
            size="small"
          ></el-input
          >分钟
        </div>
        <div class="text-area">
          含里程
          <el-input
            style="width: 80px"
            v-model="startingIncludesKilometers"
            size="small"
          ></el-input
          >km
        </div>
        <div class="text-area">
          超过里程按每公里
          <el-input
            style="width: 80px"
            v-model="exceedingMileage"
            size="small"
          ></el-input
          >元
        </div>
        <div class="text-area">
          超过时长按每分钟
          <el-input
            style="width: 80px"
            v-model="exceedingDuration"
            size="small"
          ></el-input
          >元
        </div>
        <div class="text-area">
          公里数
          <el-input
            style="width: 80px"
            v-model="thDiscountedMileage"
            size="small"
          ></el-input
          >km
        </div>
        <div>
          <div class="text-area">
            以下
            <el-input
              style="width: 80px"
              v-model="thBelowKilometers"
              size="small"
            ></el-input
            >折
          </div>
          <div class="text-area">
            以上
            <el-input
              style="width: 80px"
              v-model="thOverKilometers"
              size="small"
            ></el-input
            >折
          </div>
        </div>
        <div
          class="item-title"
          @click="addTime"
        >
          添加
        </div>
      </div>
      <div
        class="text-area"
        style="justify-content: space-between; margin-bottom: 10px"
        v-for="(item, index) in form.timePeriodList"
        :key="index"
      >
        <el-input
          readonly
          size="small"
          style="width: 100px"
          v-model="item.timePeriodName"
          clearable
        >
        </el-input>
        <div class="text-area">
          <el-time-picker
            placeholder="开始时间(时分)"
            value-format="HH::mm"
            format="HH:mm"
            size="small"
            style="width: 150px"
            v-model="item.startTime"
          ></el-time-picker>
          {{ "&nbsp" }}
          -
          {{ "&nbsp" }}
          <el-time-picker
            placeholder="结束时间(时分)"
            value-format="HH::mm"
            format="HH:mm"
            size="small"
            style="width: 150px"
            v-model="item.endTime"
          ></el-time-picker>
        </div>
        <div class="text-area">
          起步价
          <el-input
            style="width: 80px"
            v-model="item.startingPrice"
            size="small"
          ></el-input
          >元
        </div>

        <div class="text-area">
          含时长
          <el-input
            style="width: 80px"
            v-model="item.startingIncludesDuration"
            size="small"
          ></el-input
          >分钟
        </div>
        <div class="text-area">
          含里程
          <el-input
            style="width: 80px"
            v-model="item.startingIncludesKilometers"
            size="small"
          ></el-input
          >km
        </div>
        <div class="text-area">
          超过里程按每公里
          <el-input
            style="width: 80px"
            v-model="item.exceedingMileage"
            size="small"
          ></el-input
          >元
        </div>
        <div class="text-area">
          超过时长按每分钟
          <el-input
            style="width: 80px"
            v-model="item.exceedingDuration"
            size="small"
          ></el-input
          >元
        </div>
        <div class="text-area">
          公里数
          <el-input
            style="width: 80px"
            v-model="item.thDiscountedMileage"
            size="small"
          ></el-input
          >km
        </div>
        <div>
          <div class="text-area">
            以下
            <el-input
              style="width: 80px"
              v-model="item.thBelowKilometers"
              size="small"
            ></el-input
            >折
          </div>
          <div class="text-area">
            以上
            <el-input
              style="width: 80px"
              v-model="item.thOverKilometers"
              size="small"
            ></el-input
            >折
          </div>
        </div>
        <div
          class="item-title"
          @click="delTime(item)"
        >
          删除
        </div>
      </div>
    </div>
    <div class="form-item">
      <div class="item-title">
        动态调价规则设置（只适用于快车，不适用于快车一口价和拼车）
      </div>
      <div
        class="text-area"
        style="margin-bottom: 15px"
      >
        当乘客打车
        <el-input
          style="width: 80px"
          v-model="form.extraCommission"
          size="small"
        ></el-input>
        分钟内还未打到车，是否开启溢价规则
        {{ "&nbsp" }}
        <el-checkbox>开启溢价规则</el-checkbox>
        {{ "&nbsp" }}
        不开启则时间到后自动取消订单，开启则弹框给用户确认是否开始溢价。
      </div>
      <div class="item-title">溢价规则</div>
      <div
        class="text-area"
        style="margin-bottom: 15px"
      >
        当用户点击确认开始溢价后，扩大范围搜索进行溢价，按每30s扩大1KM范围进行搜索，不超过6KM。
      </div>
      <div
        class="text-area"
        style="margin-bottom: 15px"
      >
        动态溢价后每单距离部分加价金额为：(司机距乘客实际行驶距离 - 3KM) *
        <el-input
          style="width: 80px"
          v-model="form.extraCommission"
          size="small"
        ></el-input>
        元/KM
      </div>
      <div
        class="text-area"
        style="margin-bottom: 30px"
      >
        动态溢价后每单时间部分加价金额为：(司机接单时间- 用户点击溢价开始时间) *
        <el-input
          style="width: 80px"
          v-model="form.extraCommission"
          size="small"
        ></el-input>
        元/分钟
        {{ "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" }}
        且溢价时长最高不超过
        <el-input
          style="width: 80px"
          v-model="form.extraCommission"
          size="small"
        ></el-input>
        分钟
      </div>
    </div>
    <div
      class="form-item"
      style="border: 0px"
    >
      <div
        class="item-title"
        style="margin-bottom: 30px"
      >
        拼车计价规则设置
      </div>
      <div
        class="text-area"
        style="margin-bottom: 30px"
      >
        拼车预估价格计算规则：最高值按快车价格计算，最低价格按默认有个拼车乘客完全路线重合进行减免费用进行计算。
      </div>
      <div
        class="text-area"
        style="margin-bottom: 30px"
      >
        拼车减免规则：按快车价格进行计算出费用 减去
        在本乘客上车后续所有每个乘客的重合路线所减免的金额
      </div>
      <div
        class="text-area"
        style="margin-bottom: 30px"
      >
        减免里程金额：重合部分公里数，每公里减免<el-input
          style="width: 80px"
          v-model="form.extraCommission"
          size="small"
        ></el-input>
        元/KM
      </div>
      <div
        class="text-area"
        style="margin-bottom: 30px"
      >
        减免时长金额：重合公里数所行驶时间，每分钟减免<el-input
          style="width: 80px"
          v-model="form.extraCommission"
          size="small"
        ></el-input
        >元/分钟
      </div>
      <div
        class="text-area"
        style="margin-bottom: 30px"
      >
        注意：每个乘客下车时进行计算每个乘客的费用。
      </div>
      <div style="display: flex">
        <el-button
          type="primary"
          style="width: 95px; margin-right: 20px"
          @click="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          style="width: 95px"
          @click="submit"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup name="Rules-adds">
import { getRegionChildren, addRules, editRules } from "@/api/system/rules";

const { proxy } = getCurrentInstance();

const code = ref([]);
const allTags = ref([]);

const timeList = reactive({
  endTime: "",
  exceedingDuration: "",
  exceedingDuration: "",
  exceedingDuration: "",
  exceedingDuration: "",
});
const endTime = ref();
const exceedingDuration = ref();
const exceedingMileage = ref();
const startTime = ref();
const startingIncludesDuration = ref();
const startingIncludesKilometers = ref();
const startingPrice = ref();
const thBelowKilometers = ref();
const thDiscountedMileage = ref();
const thOverKilometers = ref();
const timePeriodName = ref();

const data = reactive({
  form: {
    code: [],
    timePeriodList: [],
  },
  allProvince: [],
  allCity: [],
  allZone: [],
});

const { form, allProvince, allCity, allZone } = toRefs(data);

onMounted(() => {
  if (proxy.$route.query.form) {
    form.value = JSON.parse(proxy.$route.query.form);
    form.value.code = JSON.parse(proxy.$route.query.form).code.split(",");

    try{
      allTags.value = JSON.parse(JSON.parse(proxy.$route.query.form).allTags);
    }catch{
      allTags.value = '[]';
    }
  
  }
});

function getProvince() {
  getRegionChildren(0).then((res) => {
    allProvince.value = res.data;
  });
}

function getCityOrZone(id, type) {
  if (type == 0)
    getRegionChildren(id).then((res) => {
      allCity.value = res.data;
    });
  else
    getRegionChildren(id).then((res) => {
      
      allZone.value = res.data;
    });
}

function addArea() {
  if (allTags.value.find((item) => item[2].code == code.value[2])) {
    proxy.$modal.msgError("已有该区域");
    return;
  }
  allTags.value.push([
    allProvince.value.find((item) => item.code == code.value[0]),
    allCity.value.find((item) => item.code == code.value[1]),
    allZone.value.find((item) => item.code == code.value[2]),
  ])
  console.log(allTags.value,'reffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff', code.value[2])
  form.value.code.push(code.value[2]);
  code.value = [];
  allCity.value = [];
  allZone.value = [];

  console.log(form.value.code,'codedeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
}

function addTime() {
  form.value.timePeriodList.push({
    endTime: endTime.value,
    exceedingDuration: exceedingDuration.value,
    exceedingMileage: exceedingMileage.value,
    startTime: startTime.value,
    startingIncludesDuration: startingIncludesDuration.value,
    startingIncludesKilometers: startingIncludesKilometers.value,
    startingPrice: startingPrice.value,
    thBelowKilometers: thBelowKilometers.value,
    thDiscountedMileage: thDiscountedMileage.value,
    thOverKilometers: thOverKilometers.value,
    timePeriodName: timePeriodName.value,
  });
}

function delArea(e, index) {
  allTags.value = allTags.value.filter((item) => item != index);
  form.value.code = form.value.code.filter((item) => item != index[2].code);
}

function delTime(index) {
  form.value.timePeriodList = form.value.timePeriodList.filter(
    (item) => item != index
  );
}

function submit() {
  // if (!form.value.code) {
  //   console.log(form.value,'没有选择区域')
  //   proxy.$modal.msgError("请选择区域");
  //   return;
  // }
  // if (form.value.timePeriodList.length == 0) {
  //   console.log(form.value,'没有选择时间')
  //   proxy.$modal.msgError("请选择时间段");
  //   return;
  // }
  // form.value.code = form.value.code.join(",");
  // if (form.value.ruleId != null) {
  //   alert(123)

  // } else {
    // addRules(form.value).then((res) => {
    //   proxy.$modal.msgSuccess("新增成功");
    //   proxy.$router.push({ path: "/rules-manage/rules" });
    // });
  // }
  // form.value.code = [];

  console.log(form.value.code,'codedooooooooooo')

  if(form.value.code?.length > 0 ){
    alert(1234)
    form.value.code = form.value.code.toString()
  }else{
    form.value.code = '[]'
  }

  if(allTags.value.length > 0){
      form.value.allTags = JSON.stringify(allTags.value)
  }else{
      form.value.allTags = '[]'
  }

  //加入的
  //编辑
  if(form.value.ruleId){
      editRules(form.value).then((res) => {
        proxy.$modal.msgSuccess("编辑成功");
        proxy.$router.push({ path: "/rules-manage/rules" });
      });
  }else{
  //新增
      addRules(form.value).then((res) => {
        proxy.$modal.msgSuccess("新增成功");
        proxy.$router.push({ path: "/rules-manage/rules" });
      });
  }
}

function cancel() {
  proxy.$router.push({ path: "/rules-manage/rules" });
}

getProvince();
</script>
<style lang="scss">
.form-container {
  margin: 15px;
  padding: 45px;
  .form-item {
    border-bottom: 1px solid #444;
    margin-bottom: 20px;
    .item-title {
      color: #555;
      font-weight: bolder;
      margin-bottom: 10px;
    }
    .input-area {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      width: 780px;
      .el-select__wrapper {
        margin-right: 20px;
      }
    }
    .text-area {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #555;
    }
    .tags {
      margin-bottom: 40px;
      .el-tag--dark.el-tag--info {
        padding: 18px;
        font-size: 14px;
      }
    }
    .fee {
      display: flex;
    }
  }
}
</style>
